import React, { Component } from 'react'
import { Menu } from 'antd';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
const { Item, SubMenu } = Menu


export default class MenuS extends Component<any> {

    renderItems(items: Array<any>) {
      return  (items || []).map((item: any) => {
            if (item.children) {
                return (
                    <SubMenu key={item.key} icon={<MailOutlined />} title={item.name}>
                        {/* {item.children.map((item: any) => (<Item key={item.key} icon={<PieChartOutlined />}>
                            {item.name}
                        </Item>))} */}
                        {this.renderItems(item.children)}
                    </SubMenu>
                )
            }
            else {
                return (
                    <Item key={item.key} icon={<PieChartOutlined />}>
                        {item.name}
                    </Item>)
            }
        })
    }

    render() {
        let { items } = this.props;
        console.log(this.props)
        return (
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['home']}>
                {
                    this.renderItems(items)
                }
            </Menu>)
    }
}
